import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { containerDefaultProps } from './defaultProps';
import type { ContainerOptions } from './type';

export interface ContainerProps extends ContainerOptions, HTMLAttributes<HTMLDivElement> {}

const Container: FC<ContainerProps> = (props) => {
  const { className, text, aligned, scrolling, fluid, children, forwardedRef, ...containerProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        aligned,
        { aligned: aligned === 'justified' || aligned === undefined ? false : true },
        scrolling,
        { scrolling },
        { text, fluid },
        'container',
        className,
      ),
      ...containerProps,
    },
    children,
  );
};

Container.displayName = 'Container';
Container.defaultProps = containerDefaultProps;

export default Container;
